<template>
  <el-dialog
    title="订单详情"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="onClose"
    width="500px"
  >
    <div
      class="order-loading"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      v-if="loading"
    ></div>
    <template v-else>
      <el-scrollbar class="order-scrollbar">
        <!-- 状态 -->
        <div class="order-status success" v-if="orderInfo.status == 20 || orderInfo.status == 80">
          <i class="icon el-icon-circle-check"></i>
          <span class="text">{{ orderInfo.status_text }}</span>
        </div>
        <div class="order-status error" v-else-if="orderInfo.status == 10">
          <i class="icon el-icon-warning-outline"></i>
          <span class="text">{{ orderInfo.status_text }}</span>
        </div>
        <div class="order-status cancel" v-else>
          <i class="icon el-icon-warning-outline"></i>
          <span class="text">{{ orderInfo.status_text }}</span>
        </div>
        <!-- 商品信息 -->
        <div class="order-product" v-for="(item, index) in orderInfo.products" :key="index">
          <!-- 1：点播；2：直播；3：面授；4：班级； -->
          <template v-if="$util.inArray(item.type_id, [1, 2, 3, 4])">
            <EduCourseImage
              :image="item.cover_url"
              :courseType="item.type_id"
              :promotionType="item.promotion_type"
              :width="105"
              :height="58"
            ></EduCourseImage>
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <template v-if="orderInfo.status === 20">
                <div class="time" v-if="item.expire_rest === -1">
                  永久有效
                </div>
                <div class="time" v-else-if="item.expire_rest === 0">
                  课程已过期
                </div>
                <div class="time" v-else>
                  距离课程到期还有<span class="red">{{ item.expire_rest }}</span
                  >天
                </div>
              </template>
              <el-row type="flex" class="desc">
                <div class="price">售价：{{ item.price | formatMoney }}</div>
                <div class="num del">
                  {{ item.scribing_price | formatMoney }}
                </div>
              </el-row>
            </div>
          </template>
          <!-- 8：公开考试；9：专项练习；10：套卷； -->
          <!-- 101：点播课时视频；102：点播课时音频；103：点播课时图文；104：点播课时电子书； -->
          <template v-else-if="$util.inArray(item.type_id, [8, 9, 10, 101, 102, 103, 104])">
            <div class="tag" :class="[tagClass(item.type_id)]">
              {{ $util.inArray(item.type_id, [8, 9, 10]) ? '考试' : item.type_text }}
            </div>
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <template v-if="orderInfo.status === 20">
                <div class="time" v-if="item.expire_rest === -1">
                  永久有效
                </div>
                <div class="time" v-else-if="item.expire_rest === 0">
                  课程已过期
                </div>
                <div class="time" v-else>
                  距离课程到期还有<span class="red">{{ item.expire_rest }}</span
                  >天
                </div>
              </template>
              <el-row type="flex" class="desc">
                <div class="price">售价：{{ item.price | formatMoney }}</div>
              </el-row>
            </div>
          </template>
          <!-- 商品 -->
          <template v-else-if="item.type_id == 11">
            <edu-image width="58px" height="58px" :src="item.cover_url" fit="cover"></edu-image>
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <el-row type="flex" justify="space-between" class="desc">
                <div
                  class="price"
                  v-if="orderInfo.ext_data.credit_price > 0 && orderInfo.ext_data.cash_price > 0"
                >
                  {{ orderInfo.ext_data.credit_price }}积分+{{
                    orderInfo.ext_data.cash_price | formatMoney
                  }}
                </div>
                <div class="price" v-else-if="orderInfo.ext_data.credit_price > 0">
                  {{ orderInfo.ext_data.credit_price }}积分
                </div>
                <div class="price" v-else-if="orderInfo.ext_data.cash_price > 0">
                  {{ orderInfo.ext_data.cash_price | formatMoney }}
                </div>
                <div class="free" v-else>免费</div>
                <div class="num">x{{ orderInfo.ext_data.num }}</div>
              </el-row>
            </div>
          </template>
        </div>

        <!-- 订单信息 -->
        <el-row type="flex" class="order-info">
          <el-col :span="24">
            <div class="title">订单信息</div>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">订单编号：</div>
              <div class="text">
                {{ orderInfo.order_no }}
                <i
                  class="edu-icon-order_copy_icon edu-icon--right"
                  v-clipboard:copy="orderInfo.order_no"
                  v-clipboard:success="onCopySuccess"
                ></i>
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">下单时间：</div>
              <div class="text">
                {{ orderInfo.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">支付时间：</div>
              <div class="text" v-if="orderInfo.payment_time">
                {{ orderInfo.payment_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">购买者手机号：</div>
              <div class="text">
                {{ userInfo.phone }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" class="item">
              <div class="label">支付方式：</div>
              <div class="text">
                {{ orderInfo.payway ? payway[orderInfo.payway] : '' }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" class="item">
              <div class="label">机构：</div>
              <div class="text">
                {{ orderInfo.mhm }}
              </div>
            </el-row>
          </el-col>
        </el-row>

        <!-- 物流信息 -->
        <el-row
          type="flex"
          class="order-info"
          v-if="orderInfo.order_type == 11 && orderInfo.fictitious == 0"
        >
          <el-col :span="24">
            <div class="title">配送信息</div>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" class="item">
              <div class="label">配送快递：</div>
              <div
                class="grey"
                v-if="$util.inArray(orderInfo.status, [0, 10]) || !orderInfo.ext_data.title"
              >
                未发货
              </div>
              <div class="text" v-else>
                {{ orderInfo.ext_data.title }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" class="item">
              <div class="label">快递单号：</div>
              <div
                class="grey"
                v-if="$util.inArray(orderInfo.status, [0, 10]) || !orderInfo.ext_data.order"
              >
                未发货
              </div>
              <div class="text" v-else>
                {{ orderInfo.ext_data.order }}
                <i
                  class="edu-icon-order_copy_icon edu-icon--right"
                  v-clipboard:copy="orderInfo.ext_data.order"
                  v-clipboard:success="onCopySuccess"
                ></i>
              </div>
            </el-row>
          </el-col>
          <el-col :span="24" v-if="orderInfo.addrinfo">
            <el-row type="flex" class="item">
              <div class="label">收货地址：</div>
              <div>
                <div class="text">
                  {{ orderInfo.addrinfo.consignee }}
                  {{ orderInfo.addrinfo.phone }}
                </div>
                <div class="text">
                  {{ orderInfo.addrinfo.areatext }}
                  {{ orderInfo.addrinfo.address }}
                </div>
              </div>
            </el-row>
          </el-col>
        </el-row>

        <el-row type="flex" class="order-price">
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">
                {{
                  $util.inArray(orderInfo.order_type, [0, 1, 2, 3, 4])
                    ? '课程'
                    : $util.inArray(orderInfo.order_type, [8, 9, 10])
                    ? '试卷'
                    : orderInfo.order_type == 11
                    ? '商品'
                    : ''
                }}总价：
              </div>
              <template v-if="orderInfo.order_type == 11">
                <div class="free" v-if="productTotalPrice == 0">免费</div>
                <div class="text" v-else>
                  {{ productTotalPrice }}
                </div>
              </template>
              <div class="text" v-else>
                {{ orderInfo.total_price | formatMoney }}
              </div>
            </el-row>
          </el-col>
          <!-- 课程显示优惠价 -->
          <el-col
            :span="12"
            v-if="!$util.inArray(orderInfo.order_type, [11]) && orderInfo.fee_price"
          >
            <el-row type="flex" class="item">
              <div class="label">优惠价格：</div>
              <div class="text">
                {{ orderInfo.fee_price | formatMoney }}
              </div>
            </el-row>
          </el-col>
          <!-- 实体商品显示运费 -->
          <el-col :span="12" v-else-if="orderInfo.order_type == 11 && orderInfo.fictitious == 0">
            <el-row type="flex" class="item">
              <div class="label">运费：</div>
              <div class="text">
                {{ orderInfo.products[0].carriage | formatMoney }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" class="item">
              <div class="label">
                {{
                  $util.inArray(orderInfo.status, [0, 60])
                    ? '应'
                    : $util.inArray(orderInfo.status, [10])
                    ? '需'
                    : '实'
                }}付款：
              </div>
              <template v-if="orderInfo.order_type == 11">
                <div class="red" v-if="orderInfo.payment > 0 && orderInfo.credit.credit > 0">
                  {{ orderInfo.credit.credit }}积分+
                  {{ orderInfo.payment | formatMoney }}
                </div>
                <div class="red" v-else-if="orderInfo.credit.credit > 0">
                  {{ orderInfo.credit.credit }}积分
                </div>
                <div class="red" v-else-if="orderInfo.payment > 0">
                  {{ orderInfo.payment | formatCurrency }}
                </div>
                <div class="free" v-else>免费</div>
              </template>
              <div class="red" v-else>
                {{ orderInfo.payment | formatMoney }}
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-scrollbar>

      <template v-if="orderInfo.status == 0 || orderInfo.status == 10">
        <div class="order-btn-placeholder"></div>
        <div class="order-btn">
          <el-button v-if="orderInfo.status == 0" @click="onDelete">删除订单</el-button>
          <el-button v-if="orderInfo.status == 10" @click="onCancel">取消订单</el-button>
          <el-button v-if="orderInfo.status == 10" type="primary" @click="onPay">去支付</el-button>
        </div>
      </template>
    </template>
  </el-dialog>
</template>

<script>
import projectSetting from '@/settings/projectSetting.js'
import EduCourseImage from '@/components/EduCourseImage'
import { mapState } from 'vuex'
export default {
  components: {
    EduCourseImage
  },
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      priceSymbol: projectSetting.appMoneySymbol,
      orderInfo: {},
      order_no: '',
      loading: false,
      payway: { wxpay: '微信', alipay: '支付宝', lcnpay: '余额' }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info
    }),
    // 商品总价
    productTotalPrice() {
      let credit = this.orderInfo.ext_data.credit_price
      let cash = this.orderInfo.ext_data.cash_price
      let num = this.orderInfo.ext_data.num
      if (credit * num > 0 && Number(cash) * num > 0) {
        return `${credit * num}积分+${this.priceSymbol}${Number(cash) * num}`
      } else if (credit * num > 0) {
        return `${credit * num}积分`
      } else if (Number(cash) * num > 0) {
        return `${this.priceSymbol}${Number(cash) * num}`
      } else {
        return 0
      }
    }
  },
  methods: {
    // 获取信息
    getData(id) {
      this.loading = true
      this.order_no = id
      this.$api.getOrderInfo(id, res => {
        const { data } = res
        this.orderInfo = data
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 跳转
    onClick(item) {
      this.$emit('click', item)
      this.onClose()
    },
    // 支付
    onPay() {
      this.$emit('pay', this.orderInfo)
      this.onClose()
    },
    // 删除
    onDelete() {
      this.$emit('delete', this.order_no)
    },
    // 取消
    onCancel() {
      this.$emit('cancel', this.order_no)
    },
    // 关闭
    onClose() {
      this.$emit('update:visible', false)
    },
    // 复制成功
    onCopySuccess() {
      this.$message.info('复制成功')
    },
    // tag class
    tagClass(type) {
      let cls = ''
      if (this.$util.inArray(type, [8, 9, 10])) {
        cls = 'exam'
      } else {
        let course = {
          101: 'video',
          102: 'audio',
          103: 'text',
          104: 'book'
        }
        cls = course[type] || ''
      }
      return cls
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid $border-color-divider;
}
::v-deep .el-dialog__body {
  padding-top: 20px;
}
.order-loading {
  height: 260px;
  width: 100%;
}
.order-scrollbar {
  margin-right: -17px;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    max-height: 562px;
    padding-bottom: 17px;
    padding-right: 17px;
  }
}
.order-status {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  .icon {
    font-size: 20px;
  }
  .text {
    font-size: 14px;
    margin-left: 8px;
  }
  &.success {
    color: $text-color-free;
  }
  &.error {
    color: $text-color-price;
  }
  &.cancel {
    color: #b7bac1;
  }
}

.order-product {
  display: flex;
  margin-bottom: 20px;
  .tag {
    padding: 0 7px;
    border: 1px solid;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    border-radius: 10px 0px 10px 0px;
    box-sizing: border-box;
    &.video {
      @include edu-color-primary(border-color);
      @include edu-color-auxiliary;
    }
    &.audio {
      border-color: #67c23a;
      color: #67c23a;
    }
    &.text {
      border-color: #783ce6;
      color: #783ce6;
    }
    &.book {
      border-color: #e6a23c;
      color: #e6a23c;
    }
    &.exam {
      border-color: #1644ff;
      color: #1644ff;
    }
  }
  .content {
    flex: 1;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  .title {
    width: 290px;
    font-size: 13px;
    font-weight: 500;
    color: $text-color-import;
    @include ellipsis;
  }
  .time {
    margin-top: auto;
    font-size: 12px;
    font-weight: 400;
    color: $text-color-secondary;
  }
  .red {
    font-weight: 400;
    color: $text-color-price;
  }
  .desc {
    margin-top: auto;
  }
  .price {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-secondary;
    margin-right: 10px;
  }
  .free {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-free;
    margin-right: 10px;
  }
  .num {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-auxiliary;
  }
  .del {
    text-decoration: line-through;
  }
}

.order-info {
  flex-wrap: wrap;
  padding: 15px 0;
  border-top: 1px solid $border-color-divider;
  .title {
    font-size: 13px;
    font-weight: 500;
    color: $text-color-import;
    margin-bottom: 2px;
  }
  .item {
    margin-top: 8px;
    flex-wrap: wrap;
    .label {
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
    }
    .text {
      flex: 1;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-import;
    }
    .grey {
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
    }
  }
  .edu-icon-order_copy_icon {
    cursor: pointer;
  }
}
.order-price {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 2px 10px 10px;
  flex-wrap: wrap;
  .item {
    margin-top: 8px;
  }
  .label {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-auxiliary;
  }
  .text {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-import;
  }
  .red {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-price;
  }
  .free {
    font-size: 12px;
    font-weight: 400;
    color: $text-color-free;
  }
}
.order-btn-placeholder {
  height: 40px;
}
.order-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 70px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button--default {
    @include edu-color-primary(border-color);
    @include edu-color-auxiliary;
  }
  .el-button {
    width: 94px;
    padding: 7px 0;
  }
}
</style>
